<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 900px;
            height: 600px;
            border: 1px solid black;
            text-align: center;
            position: relative;
        }

        img {
            width: 200px;
            height: 200px;
        }

        .son {
            display: inline-block;
            border: 1px solid black;
            padding: 20px;
            margin-right: 20px;
        }

        .fix {
            position: absolute;
            right: 0px;
            top: 300px;
            width: 50px;
            height: 100px;
            line-height: 30px;
            background-color: #efcd5e;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="fix">
            <div>购<br>物<br>车</div>
        </div>
    </div>

    <script>
        var arr = [{
            id: 0,
            img: './图1.png',
            name: '电容笔',
            price: '159',
            is: false,
            num: 1
        }, {
            id: 1,
            img: './图2.png',
            name: '提桶器',
            price: '3',
            is: false,
            num: 1
        }, {
            id: 2,
            img: './图3.png',
            name: '抹布',
            price: '20',
            is: false,
            num: 1
        }, {
            id: 3,
            img: './图4.png',
            name: '鸡蛋',
            price: '17',
            is: false,
            num: 1
        }, {
            id: 4,
            img: './图5.png',
            name: '牙刷',
            price: '5',
            is: false,
            num: 1
        }, {
            id: 5,
            img: './图6.png',
            name: '抽纸',
            price: '6',
            is: false,
            num: 1
        },]

        var car_list = []

        // 渲染
        var box = document.querySelector('.box')
        function fn() {
            arr.forEach(item => {
                box.innerHTML += `
            <div class="son">
                <img src="${item.img}" onclick='tiao(${item.id})'><br>
                <span>名称:${item.name}</span><br>
                <span>价格:${item.price}</span>
                <button onclick="car(${item.id})">加入购物车</button>
            </div>`
            })
        }
        fn()

        // 跳转详情
        function tiao(id) {
            var a = arr.find(item => item.id == id)
            localStorage.setItem('goods', JSON.stringify(a))
            location.assign('./详情页.html')
        }

        // 加入购物车
        function car(id) {
            var a = arr.find(item => item.id == id)
            cars = car_list.push(a)
        }

        document.querySelector('.fix').addEventListener('click', () => {
            localStorage.setItem('shangp', JSON.stringify(car_list))
            location.assign('./购物车.html')
        })
    </script>
</body>

</html>